<template>
  <h3>我是父组件App</h3>
  <hr/>
  <!--  <Child :info="info">-->
  <!--    <template v-slot="props">-->
  <!--      <p :style="{-->
  <!--                 background:props.suibian.done?'green':'red'-->
  <!--             }">{{ props.$index }}|{{ props.suibian.do }}</p>-->
  <!--    </template>-->
  <!--  </Child>-->


  <!--可以通过解构赋值的形式接收数据-->
  <!--  <Child :info="info">-->
  <!--    <template v-slot="{suibian,$index}">-->
  <!--      <p :style="{-->
  <!--                 background:suibian.done?'green':'red'-->
  <!--             }">{{ $index }}|{{ suibian.do }}</p>-->
  <!--    </template>-->
  <!--  </Child>-->

  <!--      <Child :info="info">-->
  <!--          <template v-slot:default="{suibian,$index}">-->
  <!--              <p :style="{-->
  <!--                 background:suibian.done?'green':'red'-->
  <!--             }">{{$index}}|{{suibian.do}}</p>-->
  <!--          </template>-->
  <!--      </Child>-->

  <!--      <Child :info="info">-->
  <!--          <template #default="{suibian,$index}">-->
  <!--              <p :style="{-->
  <!--                 background:suibian.done?'green':'red'-->
  <!--             }">{{$index}}|{{suibian.do}}</p>-->
  <!--          </template>-->
  <!--      </Child>-->

  <Child :info="info">
    <template #="{suibian,$index}">
      <p :style="{
                 background:suibian.done?'green':'red'
             }">{{ $index }}|{{ suibian.do }}</p>
    </template>
  </Child>
</template>

<script lang="ts" setup>
import Child from "./components/One.vue";
import {ref} from "vue";

const info = ref([
  {
    id: 1,
    do: "吃了一个包子！",
    done: true
  }, {
    id: 2,
    do: "扶老太太过马路！",
    done: false
  }
  , {
    id: 3,
    do: "赚了1000万！",
    done: true
  }
]);
</script>

<style scoped>
</style>